<template>
<div style="width:1200px;margin: 30px auto;">
    <el-row gutter="20">
        <el-col span="18">
            <el-card>
                <h2 style="color: orange;text-align: center">
                    {{c.title}}
                </h2>
                <p style="font-size: 12px;color: #666;text-align: center ">
                    作者:{{c.nickName}} | 发布时间:{{c.createTime}} | 阅读次数:{{c.viewCount}}
                </p>
                <el-divider></el-divider>
                <div v-if="c.type!=2">
                    <el-card style="font-size: 12px;">
                        <b style="color: #409EFF">摘要:</b>
                        {{c.brief}}
                    </el-card>
                    <p v-html="c.content"></p>
                </div>
                <div v-else>
                    <video style="width: 100%" :src="c.videoUrl" controls type="video/mp4"></video>
                </div>
            </el-card>
            <!--参考文献开始-->
            <el-card>
                <p>参考文献</p>
                <el-divider></el-divider>
                <el-row gutter="20">
                    <p style="margin-left: 30px">参考文献资料</p>
                </el-row>
                <el-row v-for="c in commentArr" style="margin-top: 20px">
                    <el-col span="2">
                        <el-avatar :src="c.userImgUrl"></el-avatar>
                    </el-col>
                    <el-col span="22">
                        <span style="font-weight: bold;color: orange">{{c.nickName}}</span>
                        <p style="margin: 5px 0">{{c.content}}</p>
                        <span style="font-size: 12px;color: #666">{{c.createTime}}</span>
                    </el-col>
                </el-row>
            </el-card>
            <!--参考文献结束-->
        </el-col>
        <el-col span="6">
            <el-card class="right_top_card">
                <div style="text-align: center;position: relative;bottom: 50px">
                    <img :src="c.userImgUrl" style="
                        width: 90px;height: 90px;border-radius: 90px;border:5px solid white">
                    <p style="font-size: 20px;margin: 0;font-weight: bold">{{c.nickName}}</p>
                    <i class="el-icon-edit">本文作者</i><br>
                    <i class="el-icon-time">{{c.createTime}}</i>
                </div>
            </el-card>
            <!--作者其它文章开始-->
<!--            <el-card style="margin: 10px 0">
                <h3>作者其它文章</h3>
                <el-divider></el-divider>
                <el-row gutter="10" v-for="c in otherArr">
                    <el-col span="10">
                        <a :href="'/detail.html?id='+c.id"><img :src="c.imgUrl" width="100%" height="70px"></a>
                    </el-col>
                    <el-col span="14">
                        <a :href="'/detail.html?id='+c.id">
                            <p class="title_p">{{c.title}}</p>
                        </a>
                        <i class="el-icon-time">{{c.createTime}}</i>
                    </el-col>
                </el-row>
            </el-card>-->
            <!--作者其它文章结束-->
            <!--热门文章开始-->
            <el-card style="margin: 10px 0">
                <h3>热门文章</h3>
                <el-divider></el-divider>
                <el-row gutter="10" v-for="c in hotArr">
                    <el-col span="10">
                        <a :href="'/detail.html?id='+c.id"><img :src="c.imgUrl" width="100%" height="70px"></a>
                    </el-col>
                    <el-col span="14">
                        <a :href="'/detail.html?id='+c.id">
                            <p class="title_p" >{{c.title}}</p>
                        </a>
                        <i class="el-icon-time">{{c.createTime}}</i>
                    </el-col>
                </el-row>
            </el-card>
            <!--热门文章结束-->
        </el-col>
    </el-row>
</div>
</template>
<style>
body{
    background-color: rgb(241,242,243);
}
.el-header{
    background-color: white;
}
.center{width: 1200px;margin: 0 auto}
footer h3{
    color: white;
}
#footer_center p{
    margin: 0;
}
/*因为el-card是由多个div组成的,直接通过类选择器只能选择到外层的div
而自带的内边距是内层div添加的,所以需要通过子元素选择器*/
.right_top_card>div{
    padding: 0;
}
.title_p{
    height: 40px;
    overflow: hidden;
    /*设置超出的部分用省略号展示*/
    display: -webkit-box;
    -webkit-line-clamp:2; /*设置显示的行数*/
    -webkit-box-orient: vertical;  /*设置纵向排列*/
    margin: 0;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: orange;
}

</style>
<script>
export default {
    data(){
        return{
            c:{},
            otherArr:[],
            hotArr:[],
            comment:{content:""},
            commentArr:[]
        }
    },
    methods: {
        post(){
            if(v.comment.content.trim()==""){
                v.$message.error("请输入评论内容");
                return;
            }
            //获取当前登录的用户对象
            let user=localStorage.user?JSON.parse(localStorage.user):null;
            // if (localStorage.user==null){
            if (user==null){
                alert("请先登录");
                location.href="/login.html";
                return;
            }
            //作者id和文章id
            v.comment.userId=user.id;
            v.comment.contentId=v.c.id;
            //发请求
            axios.post("/v1/comments/add-new",v.comment).then(function (response){
                if (response.data.code==1){
                    alert("评论完成");
                    v.comment.content="";
                    v.loadComments(v.c.id);
                    // location.reload();
                }else{
                    //如果登陆超时
                    alert("登陆超时，请重新登录");
                    location.href="/login.html";
                }
            })
        },
        loadComments(id){
            //请求当前文章相关的评论数据
            axios.get("/v1/comments/"+id).then(function(response){
                if(response.data.code==1){
                    v.commentArr=response.data.data;
                }
            })
        }
    },
    created() {
        let id=new URLSearchParams(location.search).get("id");

        //请求热门文章
        axios.get("/v1/contents/hot").then(function (response){
            if(response.data.code==1){
                v.hotArr=response.data.data;
            }
        })

        this.loadComments(id);
        //请求其他文章
        axios.get("/v1/contents/"+id+"/detail").then(function (response){
            if (response.data.code==1) {
                v.c = response.data.data;
                console.log(v.c);
                //加载作者其他文章
                axios.get("/v1/contents/"+v.c.userId+"/other").then(function (response){
                    if(response.data.code==1){
                        v.otherArr=response.data.data;
                    }
                })
            }
        })
    },
    mounted() {

    }
}
</script>